<template>
  <div class="homework">
    <div class="detail_a flex">
      <p>我的作业</p>
    </div>
    <div class="homework_main">
      <form action="">
        <div class="tt_a">
          <div class="tt_a_item">
            <p>所属专业：</p>
            <select name="public-choice" v-model="couponSelected" @change="getCouponSelected">
              <option :value="clist.id" v-for="(clist,list_index) in xuankelist"
                          :key="list_index">{{clist.name}}</option>
            </select>
          </div>
          <div class="tt_a_item">
            <p>作业名称：</p>
            <input type="text" v-model="homeName" placeholder="请输入作业名称">
          </div>
        </div>
        <div class="upload_a">
          <p>作业上传：</p>
          <div class="upload_a_path">点击上传<input type="file" placeholder=""></div>
          <span @click="submitForm()">上传</span>
        </div>
      </form>
      <div class="homework_list">
        <li>
          <div class="left">
            作业1：编导故事构思与写作
          </div>
          <div class="right">
            <span class="list_a">查看</span>
            <span class="list_b">删除</span>
            <span class="list_c">老师批改</span>
          </div>
        </li>
        <li>
          <div class="left">
            作业2：编导故事构思与写作
          </div>
          <div class="right">
            <span class="list_a">查看</span>
            <span class="list_b already">删除</span>
            <span class="list_c">老师批改</span>
          </div>
        </li>
        <li>
          <div class="left">
            作业3：编导故事构思与写作
          </div>
          <div class="right">
            <span class="list_a">查看</span>
            <span class="list_b already">删除</span>
            <span class="list_c">老师批改</span>
          </div>
        </li>
      </div>
    </div>
    
  </div>
</template>

<script>
import {
  Professionallist,
  submitPoForm
} from "../../api/index";
export default {
  props: {},
  data() {
      return{
          homeName: '',
          xuankelist: [],
          couponSelected: '',
        }
  },
  
  mounted() {
     Professionallist()
      .then(res => {
        if (res.data.code == 0) {
          this.xuankelist = res.data.rows;
        }
      })
      .catch(e => {});
  },
  created(){
　　　 //如果没有这句代码，select中初始化会是空白的，默认选中就无法实现
      this.couponSelected = this.xuankelist[0].id;
  },
  methods: {
    getFile(event) {
            this.file = event.target.files[0];
            console.log(this.file);
    },
    getCouponSelected(){
        //获取选中的专业
        console.log(this.couponSelected)
        
    },
    submitForm() {
      var $this = this;
      console.log($this.homeName);
      console.log($this.couponSelected);
      event.preventDefault();
      let formData = new FormData();
      formData.append('zName', $this.homeName);
      formData.append('pId', $this.couponSelected);

      let config = {
        headers: {
          'Content-Type': 'multipart/form-data'
        }
      }

      submitPoForm(formData)
      .then(res => {
        console.log(res)
      })
      .catch(e => {});
     
    },

  }
};
</script>

<style scoped>
.homework {
  width:100%;
  height: 100%;
}
.detail_a {
  justify-content: space-between;
  margin-left: 25px;
  margin-right: 24px;
  border-bottom: 1px solid #57595e;
}
.detail_a > p:nth-child(1) {
  font-size: 18px;
  height: 48px;
  line-height:64px;
  font-weight: bold;
  color: #c9a650;
}
.detail_a > p:nth-child(2) {
  width: 79px;
  height: 30px;
  background: #c9a650;
  border-radius: 4px;
  font-size: 14px;
  color: rgba(255, 255, 255, 1) !important;
  line-height: 30px;
  text-align: center;
  cursor: pointer;
}
.homework_main{
  padding:50px 25px;
}
.tt_a{
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.tt_a_item{
  display: flex;
  align-items: center;
  
}
.tt_a_item p{
  color: #dfd4d4;
  font-size: 14px;
}
.tt_a_item select{
  color: #dfd4d4;
  line-height: 40px;
  height: 40px;
  border:1px solid #6b6e7a;
  border-radius: 5px;
  width: 195px;
  padding:0 15px;
  box-sizing: border-box;
  background: none;
}
.tt_a_item select option{
  color: #dfd4d4;
  line-height: 40px;
  height: 40px;
  background: #57595e;
}
.tt_a_item input{
  color: #dfd4d4;
  line-height: 40px;
  height: 40px;
  border:1px solid #6b6e7a;
  border-radius: 5px;
  width: 395px;
  padding:0 15px;
  box-sizing: border-box;
  background: none;
}
.upload_a{
  display: flex;
  align-items: center;
  padding:15px 0;
}
.upload_a p{
  color: #dfd4d4;
  font-size: 14px;
}
.upload_a .upload_a_path{
  color: #dfd4d4;
  line-height: 40px;
  height: 40px;
  border:1px solid #6b6e7a;
  border-radius: 5px;
  width: 395px;
  padding:0 15px;
  box-sizing: border-box;
  position: relative;
}
.upload_a input{
  position: absolute;
  top:0;
  left:0;
  width: 100%;
  height: 40px;
  opacity: 0;
}
.upload_a span{
  display: block;
  width: 76px;
  height: 38px;
  line-height: 37px;
  color: #fff;
  background: #c9a650;
  border:1px solid #c9a650;
  border-radius: 5px;
  box-sizing: border-box;
  font-size: 16px;
  margin-left: 20px;
  text-align: center;
}
.homework_list li{
  padding:30px 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid #6b6e7a;
}
.homework_list li .left{
  font-size: 14px;
  color: #dfd4d4;
}
.homework_list li .right{
  display: flex;
  align-items: center;
}
.homework_list li .right span{
  display: block;
  margin-right: 17px;
  height: 30px;
  line-height: 30px;
  text-align: center;
  border-radius: 30px;
  box-sizing: border-box;
  font-size: 14px;
  border:1px solid #c9a650;
  color: #c9a650;
}
.homework_list li .right .list_a{
  width: 80px;
}
.homework_list li .right .list_b{
  width: 80px;
}
.homework_list li .right .list_c{
  width: 95px;
}
.homework_list li .right .already{
  border:1px solid #6b6e7a;
  color: #dfd4d4;
}
</style>
